<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            /*
                使图片可以自动切换
            */
            var img1 = document.getElementById("img1");
            //创建一个数组保存图片路径，
            var imgArr = ["./img/a.png", "./img/b.png", "./img/c.png", "./img/d.png", "./img/e.png"];
            //创建一个变量保存图片的索引
            var index = 0;
            //定义一个变量，用来保留定时器的标识
            var timer;
            var btno1 = document.getElementById("btno1");
            var btno2 = document.getElementById("btno2");
            btno1.onclick = function () {
                /*
                     开启定时器，来自的切换图片
                     每点击一次按钮，都会开启一个定时器
                     关闭只能关闭最后一个定时器
                */
                //在开启定时器之前，需要将上一个定时器关闭
                clearInterval(timer);
                timer=setInterval(function () {
                    //使索引自增
                    index++;
                    index = index % imgArr.length;
                    //修改图片
                    img1.src = imgArr[index];
                }, 1000)
            };
            btno2.onclick=function(){
                /*
                    clearInterval()
                        可以接收任何参数
                            有效的参数，则停止定时器
                            无效的参数，也不会报错，什么都不做
                */
                clearInterval(timer);
            };
        }
    </script>
</head>

<body>
    <img id="img1" src="./img/a.png" />
    <br/>
    <button id="btno1">开始</button>
    <button id="btno2">停止</button>
</body>

</html>